<template>
  <div class="rear" ref="myDivRef"></div>
</template>

<script>
var echarts = require('echarts')
// var echarts = require('echarts/lib/echarts')
// require('echarts/lib/component/grid')
// require('echarts/lib/chart/line')
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.myDivRef)
    myChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '5%',
        bottom: '3%',
        top: '8%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [
          '一月',
          '二月',
          '三月',
          '四月',
          '五月',
          '六月',
          '七月',
          '八月',
          '九月',
          '十月',
          '十一月',
          '十二月'
        ]
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 180,
        interval: 30, //值之间的间隔
        splitNumber: 6,
        axisLine: {
          show: true, //这里的show用于设置是否显示y轴那一条线 默认为true
          lineStyle: {
            //lineStyle里面写y轴那一条线的样式
            color: '#777',
            width: 1 //轴线的粗细 我写的是2 最小为0，值为0的时候线隐藏
          }
        }
      },
      series: [
        {
          data: [100, 120, 160, 134, 105, 160, 165, 100, 120, 161, 134, 105],
          name: '试题总数量:',
          type: 'line',
          smooth: true
        }
      ]
    })
  }
}
</script>
<style>
.rear {
  width: 770px;
  height: 300px;
}
</style>
